<template>
	<Modal v-model="data" :title="title" @on-cancel="cancel(pattern=='row'?'form':'form1')" :width="modalWidth">
    <div v-if="pattern=='row'">
      	 <Form ref="form" :model="form" :label-width="70" :rules="userFormValidate">
          <Row>	
                <Col :span="18">
                  <Form-item label="行高" prop="height">
                    <InputNumber v-model.trim="form.height" max="10000" min="0" type="number" :autosize="true" />
                  </Form-item>
                </Col>
                <Col :span="6">
                  <div style="padding:0 0 0 6px">
                    <Select v-model="form.rowCompany" style="width:100%:height:100%">
                      <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
                    </Select>
                  </div>
                </Col>				
          </Row>
         </Form> 
    </div>
    	   <div v-if="pattern=='col'">
      	 <Form ref="form1" :model="form1" :label-width="70" :rules="userFormValidate">
          <Row>	
                <Col :span="18">
                  <Form-item label="行高" prop="width">
                    <InputNumber v-model.trim="form1.width" max="10000" min="0" type="number" :autosize="true" />
                  </Form-item>
                </Col>
                <Col :span="6">
                  <div style="padding:0 0 0 6px">
                    <Select v-model="form1.rowCompany" style="width:100%:height:100%">
                      <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
                    </Select>
                  </div>
                </Col>				
          </Row>
         </Form>
    </div>
      <div slot="footer">
        <div v-if="pattern=='row'">
              <Button @click="cancel('form')">取消</Button>
          <Button @click="ok('form')" type="primary">确定</Button> 
        </div>
        <div v-if="pattern=='col'">
           <Button @click="cancel('form1')">取消</Button>
          <Button @click="ok('form1')" type="primary">确定</Button>
        </div>
        </div>
	</Modal>
</template>

<script>
export default {
  name: 'design-wh-modal',
	components: {},
	props: {
    pattern:{
      type: String,
			default: 'row',
    },
		// 对话框标题
		title: {
			type: String,
			default: '行高',
		},
		// 对话框显示隐藏
		value: {
			type: Boolean,
			default: false,
		},
		// 对话框宽度，高度自适应
		modalWidth: {
			type: Number,
			default: '320',
		},
	},
	data() {
		let validateNumer = (rule, value, callback) => {
			let re = /^[0-9]*[1-9][0-9]*$/
			if (!re.test(value)) {
				callback(new Error('请输入正整数有效值 !'))
			} else {
				callback()
			}
		}
		let validateNum = (rule, value, callback) => {
			let re = /^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
			if (!re.test(value)) {
				callback(new Error('请输入正数有效值!'))
			} else {
				callback()
			}
		}
		return {
			data: this.value,
			form: {
				height: 0,
				rowCompany: '%',
      },
      	form1: {			
				width: 0,
			  rowCompany: '%',
			},
			cityList: ['px'],//'%',
			userFormValidate: {
				row: [
					{
						required: true,
						validator: validateNumer,
						trigger: 'blur',
					},
				],
				col: [
					{
						required: true,
						validator: validateNumer,
						trigger: 'blur',
					},
				],
				height: [
					{ required: true, validator: validateNum, trigger: 'blur' },
				],
				width: [
					{ required: true, validator: validateNum, trigger: 'blur' },
				],
			},
		}
	},
	watch: {
		value(val) {
			this.data = val
		},
	},
	methods: {
		ok(name) {
			this.handleSubmit(name)
		},
		cancel(name) {
      if(name=='form'){
			this.$emit('changeVal', { pattern:'row',modal: false, button: false, form: null })
      }
      if(name=='form1'){
			this.$emit('changeVal', { pattern:'col',modal: false, button: false, form: null })
      }
			this.handleReset(name)
		},
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$Modal.confirm({
						title: '请确认',
						content: '确认修改吗?',
						onOk: () => {
							let form = {
							}
							
							if(name=='form'){
							let row=this.form.rowCompany=='px'?this.form.height:this.form.height+this.form.rowCompany	
										form={
										pattern:'row',
										row:row
										}
										this.$emit('changeVal', {
												pattern:'row',
												modal: false,
												button: true,
												form: form,
											})
							}
							else if(name=='form1'){
							let row=this.form1.rowCompany=='px'?this.form1.width:this.form1.width+this.form1.rowCompany	
										form={
										pattern:'col',
										row:row
										}
										this.$emit('changeVal', {
												pattern:'col',
												modal: false,
												button: true,
												form: form,
											})
							}
					
						},
					})
				} else {
					this.$Message.error('校验失败，请正确填写!')
				}
			})
		},
		handleReset(name) {
			this.$refs[name].resetFields()
		},
	},
}
</script>
<style lang="less" scoped>
.split-atrr {
	width: 100%;
	height: 100%;
}
&/deep/ .ivu-input-number {
	width: 100%;
}
&/deep/ .ivu-form-item{
  margin-bottom: 0px;
}
</style>